<template>
    <!-- hbx 2022-7-4 -->
    <div id="home">
        <el-container>
            <!-- 页面布局（头部） -->
            <el-header>
                <el-row>
                    <el-col :span="5">
                    <div class="grid-content bg-purple" style="color: white">
                        易游旅行平台后台管理界面
                    </div>
                    </el-col>
                    <el-col :span="3" style="float: right">
                        <el-dropdown @command="handleCommand">
                            <span class="el-dropdown-link" style="z-index:200;color:white;">
                                个人中心<i class="el-icon-arrow-down el-icon--right"></i>
                            </span>
                            <el-dropdown-menu slot="dropdown">
                                <el-dropdown-item>简介</el-dropdown-item>
                                <el-dropdown-item command="quit">退出登录</el-dropdown-item>
                            </el-dropdown-menu>
                        </el-dropdown>
                    </el-col>
                </el-row>
            </el-header>
            <el-container>
                <!-- 左侧导航栏 -->
                <el-aside stylewidth="16%">
                    <el-menu
                    default-active="2"
                    router
                    class="el-menu-vertical-demo"
                    @open="handleOpen"
                    @close="handleClose"
                    background-color="#3366cc"
                    text-color="#fff"
                    >
                        <el-col v-for="item in menuList" :key="item.id">
                            <el-submenu :index="String(item.id)">
                                <template slot = "title">
                                    <e-icon :icon-name="item.icon" style="color:white;"></e-icon>
                                    <span>{{item.menuName}}</span>
                                </template>
                                <el-menu-item-group>
                                    <el-col v-for="child in item.childs" :key="child.id">
                                    <el-menu-item :index='child.menuAddress'>
                                        <e-icon :icon-name="child.icon" style="color:white;"></e-icon>
                                        <span>{{child.menuName}}</span>
                                    </el-menu-item>
                                    </el-col>
                                </el-menu-item-group>
                            </el-submenu>
                        </el-col>
                    </el-menu>
                </el-aside>
                <el-main>
                    <router-view></router-view>
                </el-main>
            </el-container>
        </el-container>
    </div>
</template>

<script>
// @ is an alias to /src
const axios = require('axios');
export default {
    name: 'HomeViews',
    data () {
        return {
            //从头部获取用户登录账号
            loginName:'',
            //用户权限
            menuList:[],
        }
    },
    mounted () {
        // 获取登录账号
        this.getLoginName()
        var toPath= window.sessionStorage.getItem('toPath')
        if(toPath !== null & toPath !== '/'){
            this.$router.push({path: toPath})
        }
       
    },
    methods: {
        //消息提示框
        message(message,type){
            this.$message({
                message:message,
                type: type
            })
        },
        handleCommand(command) {
            if(command === 'quit') {
                this.message('退出成功', 'success')
                window.sessionStorage.removeItem('token')
                window.sessionStorage.removeItem('loginName')
                window.sessionStorage.removeItem('id')
                this.$router.push({name: 'login'})
            }
        },
        // 获取登录账号
        getLoginName () {
            if(window.sessionStorage.getItem('loginName')){
                this.$router.push({path: '/home'})
                this.getUserRights()
            }
        },
        //获取用户权限
        getUserRights(){
            this.loginName = window.sessionStorage.getItem('loginName')
            axios.get('http://127.0.0.1:8082/userManagement/getUserRights?loginName=' + this.loginName).then(res=>{
                this.menuList = res.data.obj
            }).catch(error => {
                this.$message.error('获取用户权限失败！');
            })
        },
        handleOpen (key, keyPath) {
        },
        handleClose (key, keyPath) {
        }
    }
}
</script>
<style scoped>
*{
    margin: 0px;
    padding: 0px;
}
#home,.el-container {
  height: 100%;
}
.el-header,
.el-footer {
  color: #333;
  line-height: 60px;
  background-color: #3366cc;
}
.el-aside {
  color: #333;
  line-height: 200px;
  background-color: #3366cc;
}
.el-main {
  background-color: #ffffff;
  color: #333;
  line-height: 60px;
  width:100%;
  height:100%;
}
body > .el-container {
  margin-bottom: 40px;
}
.el-container:nth-child(5) .el-aside,
.el-container:nth-child(6) .el-aside {
  line-height: 260px;
}

.el-container:nth-child(7) .el-aside {
  line-height: 320px;
}
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  color: #2c3e50;
}
</style>
